<template>
  <div>
    <v-header :seller="seller" />
    <div id="tab">
      <router-link to="/goods" class="tab-item">商品</router-link>
      <router-link to="/ratings" class="tab-item">评价</router-link>
      <router-link to="/seller" class="tab-item">商家</router-link>
    </div>
    <router-view></router-view>
  </div>
</template>

<script>
import header from './components/header/header.vue'
export default {
  data () {
    return {
      seller: {}
    }
  },
  created () {
    this.$http.get('/api/seller').then((res) => {
      res = res.body
      if (res.errno === 0) {
        this.seller = res.data
      }
    })
  },
  components: {
    'v-header': header
  }
}
</script>

<style lang="scss" scoped>
  .clearfix{
    display: inline-block;
    &after{
      display: block;
      content: '.';
      height: 0;
      line-height: 0;
      clear:both;
      visibility: hidden;
    }
  }
  @media only screen and (-webkit-min-device-pixel-ratio: 2.0) {
    .tab-item:after {
        -webkit-transform: scaleY(0.5);
        transform: scaleY(0.5);
    }
  }
  @media only screen and (-webkit-min-device-pixel-ratio: 3.0) {
    .tab-item:after {
        -webkit-transform: scaleY(0.33);
        transform: scaleY(0.33);
    }
  }
  #tab{
      display :flex;
      width : 100%;
      line-height:40px;
      position: relative;
      background: white;
      .tab-item{
        flex:1;
        text-align: center;
        // display: block
        font-size: 14px;
        a{
          color: rgb(77, 85, 93)
        }
        &:after{
          display: block;
          position: absolute;
          bottom: 0;
          left: 0;
          width: 100%;
          border-top:1px solid rgba(7,17,27,0.1);
          content: '';
        }
      }
      .router-link-active{
        color: red;
      }
    }
</style>
